<template>
    <div class="payroll">
        <div class="add">
            <div class="title">薪资列表</div>
        </div>
        <div class="search">
            <el-date-picker v-model="searchMsg.salary_date" type="datetimerange" :shortcuts="shortcuts"
                range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间" />
            <el-input placeholder="请输入员工编号" v-model="searchMsg.employee_id"></el-input>


            <div class="button">
                <el-button type="primary" @click="resetSearchMsg">重置搜索</el-button>
                <el-button type="primary" @click="getPayrollList">搜索薪资</el-button>
            </div>
        </div>

        <div class="content">
            <PayrollTable :payroll="payroll" @refreshPage="getPayrollList" @editLeave="openDialog('edit', $event)">
            </PayrollTable>
        </div>
        <div class="footer">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 40]" size="default" background
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
        <!-- <EditLeaveForm :EditPayrollDialogVisible="EditPayrollDialogVisible" :LeaveForm="leaveForm"
            @closeDialog="closeDialog('edit')" @refreshPage="getPayrollList">
        </EditLeaveForm> -->
    </div>
</template>
<script setup lang="ts">
import PayrollTable from './component/PayrollTable.vue';
// import EditLeaveForm from './component/EditLeaveForm.vue';
import { getData } from '../../api/api';

import { ref, onMounted } from 'vue';

onMounted(() => {
    getPayrollList();
})

//搜索功能
let searchMsg = ref({
    employee_id: '',
    salary_date: ''
})
const resetSearchMsg = () => {
    searchMsg.value = {
        employee_id: '',
        salary_date: ''
    }
    getPayrollList();
}
const shortcuts = [
    {
        text: '上周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 7)
            return [start, end]
        },
    },
    {
        text: '上月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 1)
            return [start, end]
        },
    },
    {
        text: '前三月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 3)
            return [start, end]
        },
    },
]
const payroll = ref([])
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(40)
const handleSizeChange = (val: number) => {
    pageSize.value = val
    getPayrollList()
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getPayrollList()
}
//获取员工列表
const getPayrollList = async () => {

    const req = {
        currentPage: currentPage.value,
        pageSize: pageSize.value,
        searchMsg: { ...searchMsg.value }
    }

    console.log("req", req);
    const res = await getData("/payroll", req);
    console.log("res", res);

    payroll.value = res.data;
    total.value = res.total;

}

//编辑员工
let EditPayrollDialogVisible = ref(false)
let payrollForm = ref({})
// 打开弹窗
const openDialog = (type: string, payroll: any) => {
    if (type === 'add') {
    } else {

        EditPayrollDialogVisible.value = true;
        payrollForm.value = payroll
    }
};

// 关闭弹窗
const closeDialog = (type: string) => {
    if (type === 'add') {
    } else {
        EditPayrollDialogVisible.value = false;
    }
};





</script>
<style scoped lang="scss">
.payroll {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    width: 100%;
    padding: 20px;


    .add {
        width: 100%;
        height: 8%;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #f1f1f1;
        border-radius: 15px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        .title {
            font-size: 18px;
            margin-left: 10px;
            font-weight: 700;
        }

    }

    .search {
        width: 100%;
        height: 10%;
        margin-top: 10px;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border: 1px solid #f1f1f1;
        border-radius: 15px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        position: relative;
        padding-right: 30%;
        padding-left: 30px;

        .el-input {
            width: 20%;
            margin-left: 10px;
        }

        .el-select {
            width: 20%;
            margin-left: 10px;
        }

        .button {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);

            .el-button {
                margin-left: 10px;
            }
        }

    }

    .content {
        width: 100%;
        margin-top: 10px;
    }

    .footer {
        width: 100%;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>